<template>
	<div class="link-preview-container">
		<div :class="type === 'mobile' ? 'mobile' : 'pc'">
			<iframe :src="link" frameborder="0" scrolling="auto" class="imgIframe-box" sandbox="allow-scripts allow-same-origin"> </iframe>
			<img src="../../assets/preview-icon/colse-icon.png" class="colse-icon" @click="close" />
		</div>
	</div>
</template>

<script>
// import ZcoIM from '../../index';
import { isMobile } from '../../utils/util';
export default {
	name: 'PdfPreview',
	components: {},
	props: {
		link: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			type: isMobile() ? 'mobile' : 'pc', // ZcoIM.type
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {
		// PDF宽度=设备宽度
	},
	methods: {
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style scoped>
.link-preview-container .pc {
	background-color: rgba(0, 0, 0, 0.91);
	width: 100%;
	height: 100%;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
}
.link-preview-container .pc .imgIframe-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 100%;
	z-index: 100;
}
.link-preview-container .pc .colse-icon {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 32px;
	right: 32px;
	cursor: pointer;
}

/*  移动端样式 */
@media screen and (max-width: 979px) {
	.link-preview-container .mobile {
		width: 100%;
		height: 100%;
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
	}
	.link-preview-container .mobile .imgIframe-box {
		width: 100%;
		height: 100%;
	}
	.link-preview-container .mobile .colse-icon {
		width: 24px;
		height: 24px;
		position: absolute;
		top: 16px;
		right: 0;
	}
}
</style>
